'use strict';

let html = document.querySelector('html');
const xhr = new XMLHttpRequest();
let flag = true;

function getPicUrl(body, classN, start, end, resolve, flag) {
    xhr.open('get', `/upload/pictures/pages?classN=${classN}&start=${start}&end=${end}`, true);
    xhr.send();
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
            if (xhr.responseText === 'no') {
                alert('获取失败！');
                return;
            }
            let arr = JSON.parse(xhr.responseText)
            for (let i = 0; i < arr.length; i++) {
                if (arr[i]) {
                    flag = true;
                    body.innerHTML += `<img type="image/jpeg" src="" data-name="${arr[i].name}" data-class="${arr[i].class}" data-src="${arr[i].imgUrl}" alt="">`;
                }
            }
            resolve({ s: start, f: flag });
        }
    }
}

function getPicData(value, resolve) {
    let imgs = document.querySelectorAll('img');
    const xhr2 = new XMLHttpRequest();
    for (let i = value.s; i < imgs.length; i++) {
        let imgUrl = imgs[i].getAttribute('data-src');
        xhr2.open('get', `/upload/pictures/files?imgUrl=${imgUrl}`, false);
        xhr2.send();
        if (xhr2.readyState === 4 && xhr2.status === 200) {
            if (xhr2.responseText === 'no') {
                alert('获取失败！');
                return;
            }
            imgs[i].src = xhr2.responseText.toString();
        }
    }
    resolve({ v: value.f, ele: imgs });
}

function largePic(imgs) {
    for (let i = 0; i < imgs.length; i++) {
        imgs[i].setAttribute('data-lage', 'true');
        imgs[i].onclick = () => {
            if (imgs[i].getAttribute('data-lage') === 'true') {
                imgs[i].setAttribute('data-lage', 'false');
                imgs[i].style.width = imgs[i].naturalWidth + 'px';
                imgs[i].style.borderColor = 'red';
            } else {
                imgs[i].setAttribute('data-lage', 'true');
                imgs[i].style.width = imgs[i].naturalWidth * 0.04 + 'rem';
                imgs[i].style.borderColor = 'black';
            }
        }
    }
}


window.addEventListener('load', () => {
    let body = document.querySelector('body');
    let classN = body.getAttribute('data-class');
    let promise = new Promise((resolve, reject) => {
        getPicUrl(body, classN, 0, 10, resolve, flag);
    })
    promise.then((value) => {
        return new Promise((resolve, reject) => {
            getPicData(value, resolve);
        })
    }).then((value) => {
        for (let i = 0; i < value.ele.length; i++) {
            value.ele[i].style.width = value.ele[i].naturalWidth * 0.04 + 'rem';
        }
        const wh = parseFloat(html.style.fontSize.replace('%', '')) / window.innerWidth;
        html.style.fontSize = wh * html.clientWidth + '%';
        window.addEventListener('resize', () => {
            html.style.fontSize = wh * html.clientWidth + '%';
        })
        lazyImg.lazy(body, classN, value.v);
        lazyImg.scrollLazy(body, classN, value.v);
        largePic(value.ele);
        // console.log(window.navigator.userAgent);
    }).catch((reason) => {
        console.error(reason);
    })
})

class LazyImg {
    lazy(body, classN, flag) {
        this.imgs = document.querySelectorAll('img');
        this.start = this.imgs.length;
        this.end = this.start + 5;
        if (body.lastElementChild.offsetTop <= 450 && flag) {
            flag = false;
            this.promise = new Promise((resolve, reject) => {
                getPicUrl(body, classN, this.start, this.end, resolve, flag);

            })
            this.promise.then((value) => {
                return new Promise((resolve, reject) => {
                    getPicData(value, resolve);
                })
            }).then((value) => {
                for (let i = 0; i < value.ele.length; i++) {
                    value.ele[i].style.width = value.ele[i].naturalWidth * 0.04 + 'rem';
                }
                this.lazy(body, classN, value.v);
                largePic(value.ele);
            }).catch((reason) => {
                console.error(reason);
            })
        }
    }

    scrollLazy(body, classN, flag) {
        this.imgs = document.querySelectorAll('img');
        this.start = this.imgs.length;
        this.end = this.start + 5;
        window.onscroll = () => {
            if (body.lastElementChild.offsetTop - window.scrollY <= 900 && flag) {
                flag = false;
                this.promise = new Promise((resolve, reject) => {
                    getPicUrl(body, classN, this.start, this.end, resolve, flag);
                })
                this.promise.then((value) => {
                    return new Promise((resolve, reject) => {
                        getPicData(value, resolve);
                    })
                }).then((value) => {
                    for (let i = 0; i < value.ele.length; i++) {
                        value.ele[i].style.width = value.ele[i].naturalWidth * 0.04 + 'rem';
                    }
                    this.scrollLazy(body, classN, value.v);
                    largePic(value.ele);
                }).catch((reason) => {
                    console.error(reason);
                })
            }
        }
    }
}

const lazyImg = new LazyImg();